<template>
	<view class="content">
		<view class="box-content">
			<!-- 头像行 -->
			<u-row customStyle="margin-bottom: 8px" gutter="6">
				<u-col span="2">
					<u-avatar size="46" :src="author.avatar"></u-avatar>
				</u-col>
				<u-col span="4">
					<view>
						<u--text
							:text="author.nickname"
							type="primary"
							bold
							size="15"
						></u--text>
					</view>
					<view style="font-size: 13px;opacity: 0.5;margin-top: 8rpx;">
						<text>{{posts.createTime}}</text>
					</view>
				</u-col>
				<u-col span="2"></u-col>
				<u-col span="3" offset="1">
					<view v-if="userId==posts.userId && posts.isFinishDeal==0">
					<u-button shape="circle" type="error" customStyle="font-weight: bold;margin-right: 5px;" size="small" text="删除商品" @click="openTip(1)" color="rgb(255,87,87)"></u-button>
					</view>
					<view style="margin-top: 10rpx;" v-if="userId!=posts.userId && posts.isFinishDeal==0">
						<u-button shape="circle" type="info" customStyle="font-weight: bold;background-color:#ff6921;color:#fff;" size="small" text="购买" @click="openTip(2)" ></u-button>
					</view>
					<view style="margin-top: 10rpx;" v-if="posts.isFinishDeal==1">
						<u-button shape="circle" type="info" customStyle="font-weight: bold;" size="small" text="交易已完成"></u-button>
					</view>
				</u-col>
				
			</u-row>
			<!-- 价格行 -->
			<u-row customStyle="margin-bottom: 8px;padding: 20rpx 0;">
				<u-col span="3"><u--text color="red" mode="price" bold :size="22" :text="posts.amountOfCurrentPrice"></u--text></u-col>
				<u-col span="5" offset="4" customStyle="padding-left: 20rpx;font-size: 12px;opacity: 0.4;">
					<text>{{postWantCount}}人想要 &nbsp;|&nbsp; {{postWatchCount}}浏览</text>
				</u-col>
			</u-row>
			<!-- 发布内容 -->
			<view >
				<u--text :text="posts.content" user-select></u--text>
			</view>
			<view class="picture-content">
				<u-album v-if="posts.imgUrls.length>0" :urls="posts.imgUrls" multipleSize="100" ></u-album>
			</view>
		</view>
		<!-- 留言部分 -->
		<view class="box-content" style="padding-bottom: 120rpx;">
			<view style="font-weight: bold;">
				<text>留言</text>
				<text style="margin-left: 10rpx;">{{posts.commentCount}}</text>
			</view>
			<view v-if="commentList.length!=0">
				<view v-for="item in commentList" :key="item.id" class="p-pad">
					<!-- 评论 -->
					<u-row customStyle="padding: 10rpx 0;" >
						<u-col span="2">
							<!-- 头像 -->
							<u-avatar size="36" :src="item.user.avatar"></u-avatar>
						</u-col>
						<u-col span="10" customStyle="margin-left: -30rpx;" @click="disposeReply(0,item)">
							<!-- 名称 -->
							<view>
								<text class="t-color">{{item.user.nickname}}</text>
								<text class="t-date">{{item.commentVo.createTime}}</text>
							</view>
							<!-- 评论内容 -->
							<view style="padding: 8rpx 0;">
								<u--text :line="5" :size="13" :text="item.commentVo.content" wordWrap="anywhere"></u--text>
							</view>
						</u-col>
						
					</u-row>
					<!-- 对评论回复 -->
					<view  v-for="(replyItem,index) in item.replyList" v-if="item.replyList.length>0" :key="index">
						<u-row customStyle="padding: 10rpx 0;" v-if="replyItem.target==null">
							<u-col span="1" offset="1" customStyle="margin-left: 84rpx;">
								<!-- 头像 -->
								<u-avatar size="28" :src="replyItem.user.avatar"></u-avatar>
							</u-col>
							<u-col span="10" customStyle="margin-left: 8rpx;" @click="disposeReply(1,replyItem)">
								<!-- 名称 -->
								<view>
									<text class="t-color">{{replyItem.user.nickname}}</text>
									<text class="t-date">{{replyItem.reply.createTime}}</text>
								</view>
								<!-- 评论内容 -->
								<view style="padding: 8rpx 0;">
									<u--text :line="5" :size="13" :text="replyItem.reply.content" wordWrap="anywhere"></u--text>
								</view>
							</u-col>
						</u-row>
						<!-- 对回复的回复 -->
						<u-row customStyle="padding: 10rpx 0;" v-else>
							<u-col span="1" offset="1" customStyle="margin-left: 84rpx;">
								<!-- 头像 -->
								<u-avatar size="28" :src="replyItem.user.avatar"></u-avatar>
							</u-col>
							<u-col span="10" customStyle="margin-left: 8rpx;" @click="disposeReply(2,replyItem)">
								<!-- 名称 -->
								<view>
									<text class="t-color">{{replyItem.user.nickname}}</text>
									<text>回复</text>
									<text class="t-color">{{replyItem.target.nickname}}</text>
									<text>:</text>
									<text class="t-date">{{replyItem.reply.createTime}}</text>
								</view>
								<!-- 评论内容 -->
								<view style="padding: 8rpx 0;">
									<u--text :line="5" :size="13" wordWrap="anywhere" :text="replyItem.reply.content"></u--text>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty
				        mode="comment"
				        icon="http://cdn.uviewui.com/uview/empty/comment.png"
				>
				</u-empty>
			</view>
		</view>
		
		<view class="tabbar" v-if="posts.isFinishDeal == 0">
			<u-row customStyle="padding: 10rpx 10rpx" justify="between" gutter="2">
				<u-col span="2"><u-avatar size="38" :src="src"></u-avatar></u-col>
				<u-col span="5" customStyle="margin-left: -20rpx;">
					 <u--input
					    :placeholder="placeholder"
						placeholderStyle="font-size: 12px;"
					 	customStyle="padding: 8rpx 16rpx;"
					    border="surround"
					 	shape="circle"
					    v-model="value"
					 	:focus="inpFocus"
					    @change="change"
						@blur="blur"
					  ></u--input>
				</u-col>
				<u-col span="5">
					<view style="display: flex;justify-content: space-between;">
						<view style="flex: 1;">
							<u-button :type="notIsMe?'':'primary'" shape="circle" text="发送" size="normal" customStyle="height: 60rpx" @click="leaveMsg()"></u-button>
						</view>
						<view style="flex: 1;" v-if="notIsMe">
							<u-button 
								shape="circle" 
								type="primary" 
								text="我想要" 
								size="normal" 
								customStyle="max-width: 82px;height: 58rpx;font-weight: bold;" 
								@click="wouldLike()">
							</u-button>
						</view>	
					</view>
					
				</u-col>
			</u-row>
		</view>
		<!-- 提示框 -->
		<u-modal 
			:show="hintShow" 
			:showCancelButton="true" 
			:closeOnClickOverlay="true" 
			@confirm="finish" 
			@cancel="hintShow=false">
				<view class="slot-content">
					<text>{{textVal}}</text>
				</view>
		</u-modal>
		<u-toast ref="uToast"></u-toast>
		
	</view>
	
</template>

<script>
	import {getPostsDeatil, addComment, postUpdate, deletePost, recordPostWant, commitOrder} from '@/utils/api.js'
	export default {
		data() {
			return {
				userId: '',
				hintShow: false,
				value: '',
				placeholder: '请输入评论内容~',
				inpFocus: false,
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				textVal: '',
				sign: 1,
				
				discussPostId: 0,
				stairs: 0, //标记点击第几层: 0-未点击;1-第一层;2-第二层
				posts: {},	//帖子详情
				author: {avatar:''},	//发帖作者
				commentList:[],	//评论列表
				postWantCount: 0, //商品想要人数
				postWatchCount: 0, //商品浏览人数
				targetId: 0,
				entityId: 0,
				entityType: 1,
				myName: '',
				yourId: '',
				notIsMe: true,
			}
		},
		onLoad(option) { 
			this.discussPostId = option.id
			if(getApp().globalData.userInfo == null){
				getApp().globalData.userInfo = JSON.parse(uni.getStorageSync("userInfo"))
			}
			this.userId = getApp().globalData.userInfo.id
			this.src = getApp().globalData.userInfo.avatar
		},
		onReady() {
			this.postsDetail()
		},
		methods: {
			openTip(k){
				this.sign = k
				if(k == 1){
					this.textVal = '是否确定删除该闲置物品?'
				}else {
					this.textVal = '是否与卖家已协商好,确定购买该商品?'
				}
				this.hintShow = true
			},
			//对评论或者回复进行回复
			disposeReply(sign, item){
				this.inpFocus = true
				this.placeholder = `回复${item.user.nickname}:`
				this.stairs = sign
				this.entityType = 2
				if(sign == 0){
					this.entityId = item.commentVo.id
				}else if(sign == 1){
					this.entityId = item.reply.entityId
				}else {
					this.entityId = item.reply.entityId
					this.targetId = item.user.id
				}
				
			},
			leaveMsg(){
				const comment = {
					postsId: this.posts.id,
					serveType: this.posts.type,
					content: this.value,
					entityType: this.entityType,
					entityId: this.entityId,
					targetId: this.stairs != 2 ? 0 : this.targetId
				}
				//console.log("commitComment", comment)
				const that = this
				addComment(comment).then(res => {
					if(res.code){
						getApp().globalData.toast[1].message = res.message
						this.$refs.uToast.show({
							...getApp().globalData.toast[1],
							complete() {
								//回调
							}
						})
						return
					}
					getApp().globalData.toast[0].message = '发表评论成功'
					this.$refs.uToast.show({
						...getApp().globalData.toast[0],
						duration: 1500,
						complete() {
							//重新拉取数据
							that.postsDetail()
							that.value = ''
						}
					})
				}).catch(err => {
					getApp().globalData.toast[1].message = err.message
					this.$refs.uToast.show({
						...getApp().globalData.toast[1],
						complete() {},
					})
				})
				
			},
			postsDetail(){
				getPostsDeatil(this.discussPostId).then(res => {
					res.posts.imgUrls = res.posts.imgUrls!=null?res.posts.imgUrls.split(","):[]
					this.posts = res.posts
					this.author = res.user
					this.commentList = res.comments
					this.entityId = this.posts.id
					this.postWatchCount = res.postWatchCount
					this.postWantCount = res.postWantCount
					// 判断是否是帖子拥有者
					this.myName = uni.getStorageSync("myUsername")
					this.yourId = "im" + this.author.phone
					if(this.myName == this.yourId) this.notIsMe = false
				}).catch(err => {
					getApp().globalData.toast[1].message = '加载数据失败'
					this.$refs.uToast.show({
						...getApp().globalData.toast[1],
						complete() {
							//回调
						}
					})
				})
			},
			blur(value){	//输入框失去焦点
				this.stairs = 0
				this.placeholder = '请输入评论内容~'
			},
			//input监听
			change(){},
			wouldLike(){
				//记录想要的商品
				recordPostWant({postId: this.posts.id}).then(res=>{}).catch(err=>{})
				let nameList = {
				  myName: this.myName,
				  your: this.yourId,
				};
				uni.navigateTo({
				  url: `../chatroom/chatroom?username=${JSON.stringify(nameList)}`,
				});
			},
			toBuy(){
				uni.$u.route('pages/buy/buy');
			},
			finish(){
				const _that = this
				_that.hintShow = false
				if(_that.sign == 1){
					this.dealPost()
				}else {
					const form = {
						postId: _that.posts.id, 
						dealPrice: _that.posts.amountOfCurrentPrice, 
						mobilePhone: _that.author.phone
					}
					commitOrder(form).then(res => {
						getApp().globalData.toast[0].message = '购买成功,已生成订单'
						_that.$refs.uToast.show({
							...getApp().globalData.toast[0],
							complete() {
								//回调
								_that.postsDetail()
							}
						})
					}).catch(err=>{
						getApp().globalData.toast[1].message = err.message
						_that.$refs.uToast.show({
							...getApp().globalData.toast[1],
							complete() {}
						})
					})
					
				}
				
			},
			dealPost(){
				const _that = this
				_that.hintShow = false
				deletePost({id: _that.posts.id, status: 1, postsType: 3}).then(res => {
					getApp().globalData.toast[0].message = '删除成功'
					_that.$refs.uToast.show({
						...getApp().globalData.toast[0],
						complete() {
							uni.$u.route({
								type: 'redirect',
								url: 'pages/used-deal/used-deal'
							})
						}
					})
				}).catch(err=>{})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
		background-color: rgb(242, 242, 242);
		.box-content {
			min-height: 300rpx;
			margin: 16rpx 0;
			padding: 18rpx 20rpx 30rpx 20rpx;
			background-color: #fff;
			.picture-content {
				margin-top: 20rpx;
				margin-left: 20rpx;
			}
			.p-pad {
				padding-top: 20rpx;
			}
			.t-date{
				font-size: 13px;
				margin-left: 20rpx;
			}
			.t-color{
				opacity: 0.4;
				font-size: 15px;
				font-weight: bold;
			}
			
		}
		.tabbar {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			z-index: 999;
			background: #fff;
			border-top: 2rpx solid #eee;
		}
	}
</style>
